<template>
  <div>
    <div class="header">
      <a href="">自由行</a><el-divider direction="vertical"></el-divider>
      <a href="">跟团游</a>
      <el-divider direction="vertical"></el-divider>
      <a href="">当地游</a>
      <el-divider direction="vertical"></el-divider>
      <a href="">签证</a>
      <el-divider direction="vertical"></el-divider>
      <a href="">全球WiFi</a>
      <el-divider direction="vertical"></el-divider>
      <a href="">邮轮</a>
    </div>
    <ElRow type="flex" justify="center">
      <ElCol :span="18">
        <header-item-vue/>
        <div class="header2">
          <div>
            <ul>
              <li
                v-for="(item, i) in hotmddList"
                :key="i"
                @mouseover="selectStyle(item, i)"
                @mouseout="isHeaderNav = false"
              >
                <p>{{ item.navbarTitle }}</p>
                <p style="overflow: hidden; height: 24px">
                  <a
                    href="#"
                    v-for="(a, x) in item.provinces.slice(0, 5)"
                    :key="x"
                    >{{ a.name }}</a
                  >
                </p>
              </li>
            </ul>
          </div>
          <div>
            <img width="100%" :src="headerImg" alt="" />
            <ul class="clearfix">
              <li>
                <i class="icon1"></i>
                <strong>透明低价</strong>
                <div>超值低价、每日更新</div>
              </li>
              <li>
                <i class="icon2"></i>
                <strong>海量路线</strong>
                <div>全球线路、自由选择</div>
              </li>
              <li>
                <i class="icon3"></i>
                <strong>客服保障</strong>
                <div>专业客服、实时在线</div>
              </li>
            </ul>
          </div>

          <div
            @mouseover="isHeaderNav = true"
            @mouseout="isHeaderNav = false"
            :class="isHeaderNav ? 'show' : 'hid'"
          >
            <ul>
              <li v-for="(item, i) in itemContent.provinces" :key="i">
                <div v-if="itemIndex == 0" class="item0">
                  <nav-item-vue :data="item" />
                </div>
                <div v-else class="itemNone0">
                  <ul>
                    <li>
                      <h3>{{ item.name }}</h3>
                      <div>
                        <a href="#" v-for="(item2, ii) in item.areas" :key="ii">
                          {{ item2 }}
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<script>
import api from "@/api/mdd";
import NavItemVue from "./NavItem.vue";
import headerItemVue from './headerItem.vue';

export default {
  data() {
    return {
      hotmddList: [],
      isHeaderNav: false,
      itemContent: {},
      itemIndex: false,
      headerImg:
        "http://b1-q.mafengwo.net/s17/M00/48/32/CoUBXmAH0r6AJYKrAAOV-N3sxVc255.png?imageMogr2%2Fthumbnail%2F%21730x405r%2Fgravity%2FCenter%2Fcrop%2F%21730x405%2Fquality%2F100",
    };
  },
  components: {
    NavItemVue,
    headerItemVue
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      api.getHotmddInfo().then((res) => {
        console.log("目的地=>>", res);
        this.hotmddList = res.hotmddList;
      });
    },
    selectStyle(item, i) {
      this.isHeaderNav = true;
      this.itemContent = item;
      this.itemIndex = i;
      console.log("item=>>", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  text-align: center;
  padding: 15px 0;
  a {
    color: #666666;
    padding: 0 5px;
    &:hover {
      color: #ff9d00;
    }
  }
  a:nth-child(1) {
    border-bottom: 2px solid #ff9d00;
    padding-bottom: 10px;
    color: #ff9d00;
  }
}

.header2 {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 1015px;
  & > div:nth-child(1) {
    width: 30%;
    height: 478px;
    border: 2px solid #ff9d00;
    border-radius: 4px;

    ul {
      li {
        padding: 11px 20px 11px 50px;
        height: 45px;
        border-bottom: 1px solid #f1f1f1;
        position: relative;
        &:nth-child(2) {
          overflow: hidden;
        }
        a {
          float: left;
          margin-right: 10px;
          color: #666;
          white-space: nowrap;
          font-size: 12px;
          margin-top: 5px;
          &:hover {
            text-decoration: underline;
            color: red;
          }
        }
        &:nth-last-child(1) {
          border-bottom: none;
        }
        &::before {
          content: "";
          position: absolute;
          left: 8px;
          top: 18px;
          width: 30px;
          height: 30px;
          background-image: url("http://css.mafengwo.net/images/sales/global-icon4.png");
        }
        &:nth-child(2)::before {
          background-position: 0 -30px;
        }
        &:nth-child(3)::before {
          background-position: 0 -60px;
        }
        &:nth-child(4)::before {
          background-position: 0 -90px;
        }
        &:nth-child(5)::before {
          background-position: 0 -120px;
        }
        &:nth-child(6)::before {
          background-position: 0 -150px;
        }
        &::after {
          content: "";
          position: absolute;
          width: 8px;
          height: 14px;
          right: 12px;
          top: 22px;
          background-image: url("http://css.mafengwo.net/images/sales/index-v4-sprites3.png");
          background-position: -30px 0;
          background-repeat: no-repeat;
        }
        &:hover{
          &::after{background-position: -40px 0;}
          border-top: 2px solid #ff9d00;
          border-bottom: 2px solid #ff9d00;
          &:nth-child(1){border-top: none;}
          &:nth-last-child(1){border-bottom: none;}
        }
      }
    }
  }
  & > div:nth-child(2) {
    width: 700px;
    height: 478px;
    margin-left: 20px;
    .clearfix {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100px;
      font-size: 15px;
      li {
        padding-left: 10%;
        &:hover {
          border-right: 2px solid #fff;
        }
        i {
          float: left;
          margin: 4px 0 0 -45px;
          width: 36px;
          height: 36px;
          background: url("http://css.mafengwo.net/images/sales/global-icon4.png")
            no-repeat -30px 0;
        }
        .icon1 {
          background-position: -30px 0;
        }
        .icon2 {
          background-position: -30px -40px;
        }
        .icon3 {
          background-position: -30px -80px;
        }
      }
    }
  }
  & > div:nth-child(3) {
    position: absolute;
    width: 70.1%;
    height: 478px;
    right: 0;
    top: 0;
    border: 2px solid #ff9d00;
    border-left: none;
    background-color: #fff;
    overflow: hidden;
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      overflow: hidden;
      li {
        width: 50%;
        margin: 10px 0;
        .itemNone0 {
          a {font-size: 14px;color: #666;padding-right: 3px;}
          a:hover {text-decoration: underline;}
          h3{padding-bottom: 5px;border-bottom: 1px solid #e9e9e9;margin-bottom: 5px;}
        }
      }
    }
  }
}
.show {
  display: block;
  opacity: 1;
}
.hid {
  display: none;
  opacity: 0;
  z-index: -1;
}
</style>